<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet"/>
		
	</head>
	<style type="text/css">
		.information-line{
			height: 3.6rem;
			line-height: 3.6rem;
			font-size: 1.2rem;
		}
		.logout{
			background-color: red;
			border-radius:10px ;
			color:white;
			font-size: 1.6rem;
			height: 3.6rem;
			line-height: 3.6rem;
		}
		.logout-button{
			text-align: center;
			width: 50%;
			margin:auto;
			margin-top: 0.6rem;
		}
	</style>
	<body>
		
		<div class="mui-content">
		    
		    <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-media">
		            <a id="link_myface" href="javascript:;">
		            	<span class="mui-pull-right mui-icon mui-icon-arrowright" 
		            			style="line-height: 42px;color: lightgray;margin-left: 3px;"></span>
		                <img id="img_my_face" class="mui-media-object mui-pull-right" src="image/default.jpg">
		                <div class="mui-media-body information-line">
		                    	头像
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a id="link_nickname" href="javascript:;">
		            	<span class="mui-pull-right mui-icon mui-icon-arrowright" 
		            			style="color: lightgray;margin-left: 3px;line-height: 3.6rem"></span>
		            	<span id="span_nickname" class="mui-pull-right" 
		            			style="color: gray;font-size: 1.2rem;line-height: 3.6rem;"></span>
		                <div class="mui-media-body information-line">
		                    昵称
		                </div>
		            </a>
		        </li>
				<li class="mui-table-view-cell mui-media">
				    <a id="link_phone" href="javascript:;">
						<span id="span_phone" class="mui-pull-right" 
								style="color: gray;font-size: 1.2rem;line-height: 3.6rem;"></span>
				        <div class="mui-media-body information-line">
				            手机号
				        </div>
				    </a>
				</li>
		        <li class="mui-table-view-cell mui-media">
		            <a id="link_info" href="javascript:;">
		            	<span class="mui-pull-right mui-icon mui-icon-arrowright" 
		            			style="color: lightgray;margin-left: 3px;line-height: 3.6rem"></span>
		                <div class="mui-media-body information-line">
		                    个人信息
		                </div>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media">
		            <a id="link_member" href="javascript:;">
		            	<span class="mui-pull-right mui-icon mui-icon-arrowright" 
		            			style="color: lightgray;margin-left: 3px;line-height: 3.6rem"></span>
		                <div class="mui-media-body information-line">
		                    会员信息
		                </div>
		            </a>
		        </li>
				<li class="mui-table-view-cell mui-media">
				    <a id="link_record" href="javascript:;">
				    	<span class="mui-pull-right mui-icon mui-icon-arrowright" 
				    			style="color: lightgray;margin-left: 3px;line-height: 3.6rem"></span>
				        <div class="mui-media-body information-line">
				            运动记录
				        </div>
				    </a>
				</li>
		    </ul>
		    
		    <br />
		    
		    
		    	<div class="logout-button">
		            <a id="link_logout" href="javascript:;">
		                <div class="mui-media-body logout">
		                    退出登录
		                </div>
		            </a>
		        </div>
		    
		    
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function(){
				var user = app.getUserGlobal();
				console.log(JSON.stringify(user));
				
				// 获得当前的webview，刷新当前用户信息
				var meWebview = plus.webview.currentWebview();
				meWebview.addEventListener("show", function() {
					refreshUserInfo();
				});
				
				// 页面跳转，我的头像
				var link_myface = document.getElementById("link_myface");
				link_myface.addEventListener("tap", function() {
					galleryImg();

				});
				
				// 页面跳转，修改昵称
				var link_nickname = document.getElementById("link_nickname");
				link_nickname.addEventListener("tap", function() {
					mui.openWindow("me/nickname.html", "nickname.html");
				});
				
				//页面跳转,查看个人信息
				var link_info = document.getElementById("link_info");
				link_info.addEventListener("tap",function(){
					if(app.getRealInfoGlobal()!=null){
						mui.openWindow("me/realinfo.html","realinfo.html");
					}else{
						plus.nativeUI.showWaiting("请稍候...");
						mui.ajax(app.serverUrl+'/user/selectInfo',{
							data:{uid:user.id
								
							},
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							success:function(data){
								//关闭等待显示提醒
								plus.nativeUI.closeWaiting();
								console.log(JSON.stringify(data.data));
								app.setRealInfoGlobal(data.data);
								mui.openWindow("me/realinfo.html","realinfo.html");
							},
							error:function(xhr,type,errorThrown){
								
							}
						});
					}
				});
				//页面跳转,查看会员信息
				var link_member = document.getElementById("link_member");
				link_member.addEventListener("tap",function(){
					//mui.openWindow("me/member.html","member.html");
					if(app.getMemberGlobal()!=null){
						mui.openWindow("me/member.html","member.html");
						}else{
							plus.nativeUI.showWaiting("请稍候...");
							mui.ajax(app.serverUrl+'/user/selectmember',{
								data:{uid:user.id
							},
							dataType:'json',
							type:'post',
							timeout:10000,
							success:function(data){
								plus.nativeUI.closeWaiting();
								console.log(JSON.stringify(data.data));
								app.setMemberGlobal(data.data);
								mui.openWindow("me/member.html","member.html");
							},
							error:function (xhr,type,errorThrown) {
							    	mui.alert('查询失败','title','btnValue',function (e) {
							    	   e.index
							    	},'div')
							}
							});
						}
				});
			
				// 用户退出
				var link_logout = document.getElementById("link_logout");
				link_logout.addEventListener("tap", function(){
					app.outUserGlobal();
					app.outRealInfoGlobal();
					app.outMemberGlobal();
					app.outSchemeGlobal();
					mui.openWindow("login.html", "login.html");
				});
				// 添加自定义事件，刷新用户信息
				window.addEventListener("refresh", function(){
					refreshUserInfo();
				});
				var link_record = document.getElementById("link_record");
				link_record.addEventListener("tap", function(){
					console.log("点击成功");
					mui.openWindow({
						url:"sports/record.html",
						id:"record.html",
						extras:{
							uid:app.getUserGlobal().id
							
						}
					})
				})
			});
			
			//刷新用户信息
			function refreshUserInfo() {
				var user = app.getUserGlobal();
				console.log(JSON.stringify(user));
				
				if (user != null) {
					
					var faceImage = user.avatar;
					var nickname = user.nickname;	
					var phone = user.phone;
					var span_nickname = document.getElementById("span_nickname");	
					var span_phone = document.getElementById("span_phone");
					span_nickname.innerHTML = nickname;
					span_phone.innerHTML = phone;
					if (app.isNotNull(faceImage)) {
						var img_my_face = document.getElementById("img_my_face");
						img_my_face.src = app.serverUrl + faceImage;
					}
				}
				
			}
			function galleryImg(){
				plus.gallery.pick(function(e){
					for(var i in e.files);
					console.log(e.files[0]);
					//将图片编码
					var img = new Image();
					var uid = app.getUserGlobal().id;
					img.src = e.files[0];
					img.onload = function(){
						var base64 = app.getBase64Image(img);
						var img_my_face = document.getElementById("img_my_face");
						console.log(base64);
						//通过ajax实现图片上传
						plus.nativeUI.showWaiting("请稍候...");
						mui.ajax(app.serverUrl+'/user/upavatar',{
						
							data:{
								uid:uid,
								pictureFile:base64
								
							},
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							success:function(data){
								
								console.log(JSON.stringify(data));
								app.outUserGlobal();
								app.setUserGlobal(data.data);
								var userGo = data.data;
								
								img_my_face.src = img.src;
								mui.toast('上传完成');
								plus.nativeUI.closeWaiting();
							},
							error:function(xhr,type,errorThrown){
								alert("上传失败");
							}
						});
					}
				},function(e){
					mui.toast("取消选择");
				},{
					filter:"image",
					multiple:true,
					maximum:1,
					system:false,
					onmaxed:function(){
						plus.nativeUI.alert("只能选择一张图片");
					}
				});
			}
			
		</script>
	</body>

</html>